<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" :element-loading-text="loadingContent">
		<div class="navList">
			<div>
				<el-button size="small" type="primary" @click="reloadDatas">
					<i v-if="!refreshObj.waitting" class="el-icon el-icon-eleg-icon_refresh el-icon--left"></i>
					<i v-else class="el-icon-loading"></i> 刷新
				</el-button>
				<el-button :disabled="!IsOnLine" size="small" type="primary" @click="AddNetwork">
					<i v-if="!addNwkObj.waitting" class="el-icon el-icon-plus el-icon--left"></i>
					<i v-else class="el-icon-loading"></i> 允许加网
				</el-button>
				<!-- <el-button size="small" type="primary" @click="getNwkParameter">
					<i class="el-icon el-icon-plus el-icon--left"></i>
					获取网络参数
				</el-button> -->
				<el-dropdown style="margin-left: 8px" split-button size="small" type="primary" @command="handleCommand">
					<i v-if="netWorkObj.waitting" class="el-icon-loading"></i> 组网模式
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :disabled="!IsOnLine" command="1">
							<i class="el-icon-eleg-icon_cogs el-icon--left"></i>手动组网
						</el-dropdown-item>
						<el-dropdown-item :disabled="!IsOnLine" command="2">
							<i class="el-icon-eleg-icon_genius el-icon--left"></i>自动组网
						</el-dropdown-item>
						<el-dropdown-item :disabled="!IsOnLine" command="3">
							<i class="el-icon-upload2 el-icon--left"></i>退出组网
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<el-row :gutter="10">
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>设备码：{{templateObj.sn}}</span>
						<span style="font-size: 13px">(最后一次与服务器连接时间：{{pingTime}})</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<div>
						<el-table border style="width: 100%;margin-top: 1px" :data="boardInfoDatas">
							<el-table-column label="名称" align="center" prop="borderName">
								<template slot-scope="scope">
									<span>{{scope.row.name}}<i style="cursor: pointer;font-size: 15px;margin-left: 5px;color :#20A0FF" class="el-icon el-icon-edit el-icon--left" @click="changeBoardName(scope.row)"></i></span>
								</template>
							</el-table-column>
							<el-table-column label="信道号" align="center" prop="channel"></el-table-column>
							<el-table-column label="EUI64地址" align="center" prop="ieeeaddr"></el-table-column>
							<el-table-column label="连接密钥" align="center" prop="linkkey"></el-table-column>
							<el-table-column label="发射功率(W)" align="center" prop="power"></el-table-column>
						</el-table>
						<el-table border style="width: 100%;margin-top: 1px" :data="boardInfoDatas">
							<el-table-column label="网络地址" align="center" prop="nwkaddr"></el-table-column>
							<el-table-column label="网络密钥" align="center" prop="nwkkey"></el-table-column>
							<el-table-column label="PAN ID" align="center" prop="panid"></el-table-column>
							<el-table-column label="扩展PAN ID" align="center" prop="panidex"></el-table-column>
						</el-table>
					</div>
				</div>
			</el-col>
			<el-col style="margin-top: 5px;" :span="12" v-if="deviceInfoDatas.length > 0" v-for="item in deviceInfoDatas">
				<!-- 设备类型 -->
				<div class="bg-purple" style="margin-top: 1px">
					<div class="panel-title">
						<span>{{item.name}}</span>
						<img class="title-img" v-bind:src="imgUrl">
					</div>
					<el-row :gutter="5">
						<el-col style="margin-top: 3px" :span="24">
							<div style="float: right;display: flex;">
								<div style="padding-right: 10px;">
									<small>网络地址：{{item.nwk}}</small>
								</div>
								<div style="padding-right: 10px;">
									<small>信号强度：{{item.rssi}}</small>
								</div>
								<div>
									<small>链路质量：{{item.lqi}}</small>
								</div>
							</div>
						</el-col>
						<!-- 操作 -->
						<el-col :span="4" style="text-align: left;margin-top: 10px;">
							<el-button style="margin-left: 10px;" :disabled="!IsOnLine" type="success" size="small" @click="changeDeviceName(item)">
								<i class="el-icon el-icon-edit el-icon--left"></i> 编辑
							</el-button>
							<el-button style="margin-top: 10px;" :disabled="!IsOnLine" type="danger" size="small" @click="controlEscapeNwk(item)">
								<i class="el-icon el-icon-delete2 el-icon--left"></i> 移除
							</el-button>
						</el-col>
						<el-col style="margin-top: 3px;" :span="10" v-for="onoff in item.onoff">
							<div class="grid-content1 bg-purple" v-loading="onoff.waitting">
								<div class="detail-section">
									<div class="section-left" style="width: 100%;text-align: center">
										<div>
											<small>{{onoff.name}}<i style="cursor: pointer;font-size: 10px;margin-left: 5px;color :#20A0FF" class="el-icon el-icon-edit el-icon--left" @click="changeClusterName(item,onoff)"></i></small>
										</div>
										<div>
											<i v-if="onoff.state" class="el-icon-eleg-icon_lightbulb_alt" style="color: #13ce66;font-size: 30px"></i>
											<i v-else class="el-icon-eleg-icon_lightbulb_alt" style="font-size: 30px;color: #999999"></i>
										</div>
										<div class="switch">
											<el-switch :disabled="!IsOnLine" v-model="onoff.state" :width="60" on-color="#13ce66" :on-text="$t('message.on')" :off-text="$t('message.off')" @change="controlOnOff(item,onoff)"></el-switch>
										</div>
									</div>
									<div class="section-right" style="width: 100%;text-align: left">
										<div>
											<small>最大值：{{onoff.max}}</small>
										</div>
										<div>
											<small>最小值：{{onoff.min}}</small>
										</div>
										<div>
											<a style="text-decoration:underline;cursor: pointer;color :#20A0FF;font-size: 10px" @click="controlUploadTime(item,onoff)">设置</a>
										</div>
										<div>
											<el-switch :disabled="!IsOnLine" v-model="onoff.bind" :width="60" on-color="#13ce66" on-text="绑定" off-text="未绑定" off-color="#ff4949" @change="controlBind(item,onoff)"></el-switch>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		 <!--修改控制板名称--> 
		<el-dialog title="控制板重命名" v-model="renameBoardDialog" :class="[dialog-tiny-width]">
			<span>
				<div style="margin-top: 15px">
					<el-form id="form" ref="renameBoardForm" :model="renameBoardForm" :rules="renameBoardRules" label-width="100px">
						<el-form-item label="控制板名称" prop="boardName">
							<el-input v-model="renameBoardForm.boardName" required style="max-width:480px"></el-input>
						</el-form-item>
					</el-form>
				</div>
    		</span>
			<span slot="footer" class="dialog-footer">
    			<el-button v-if="!renameBoardForm.waitting" type="primary" @click="confirmRenameBoard('renameBoardForm')">确 定</el-button>
    			<i v-else class="el-icon-loading" style="font-size:25px"></i>
  			</span>
		</el-dialog>
		 <!--修改设备名称--> 
		<el-dialog title="设备重命名" v-model="renameDeviceDialog" :class="[dialog-tiny-width]">
			<span>
				<div style="margin-top: 15px">
					<el-form id="form" ref="renameDeviceForm" :model="renameDeviceForm" :rules="renameDeviceRules" label-width="100px">
						<el-form-item label="设备名称" prop="deviceName">
							<el-input v-model="renameDeviceForm.deviceName" required style="max-width:480px"></el-input>
						</el-form-item>
					</el-form>
				</div>
    		</span>
			<span slot="footer" class="dialog-footer">
    			<el-button v-if="!renameDeviceForm.waitting" type="primary" @click="confirmRenameDevice('renameDeviceForm')">确 定</el-button>
    			<i v-else class="el-icon-loading" style="font-size:25px"></i>
  			</span>
		</el-dialog>
		<!-- 修改Cluster名称 -->
		<el-dialog title="Cluster重命名" v-model="renameClusterDialog" :class="[dialog-tiny-width]">
			<span>
				<div style="margin-top: 15px">
					<el-form id="form" ref="renameClusterForm" :model="renameClusterForm" :rules="renameClusterRules" label-width="100px">
						<el-form-item label="开关名称" prop="clusterName">
							<el-input v-model="renameClusterForm.clusterName" required style="max-width:480px"></el-input>
						</el-form-item>
					</el-form>
				</div>
    		</span>
			<span slot="footer" class="dialog-footer">
    			<el-button v-if="!renameClusterForm.waitting" type="primary" @click="confirmRenameCluster('renameClusterForm')">确 定</el-button>
    			<i v-else class="el-icon-loading" style="font-size:25px"></i>
  			</span>
		</el-dialog>
		<!-- 修改设备上报时间 -->
		<el-dialog title="修改开关自动上报时间间隔" v-model="uploadTimeDialog" :class="[dialog-tiny-width]">
			<span>
				<div style="margin-top: 15px">
					<el-form id="form" ref="uploadTimeForm" :model="uploadTimeForm" label-width="100px">
						<el-form-item label="最小值(S)" prop="min">
							<el-input v-model="uploadTimeForm.min" min="0" type="number" required style="max-width:480px"></el-input>
						</el-form-item>
						<el-form-item label="最大值(S)" prop="max">
							<el-input v-model="uploadTimeForm.max" min="0" type="number" required style="max-width:480px"></el-input>
						</el-form-item>
					</el-form>
				</div>
    		</span>
			<span slot="footer" class="dialog-footer">
    			<el-button v-if="!uploadTimeForm.waitting" type="primary" @click="confirmControlUploadTime">确 定</el-button>
    			<i v-else class="el-icon-loading" style="font-size:25px"></i>
  			</span>
		</el-dialog>
		<!-- 手动参数 -->
		<el-dialog title="手动组网参数" v-model="manualNwkDialog" :class="[dialog-tiny-width]">
			<span>
				<div style="margin-top: 15px">
					<el-form id="form" ref="manualNwkForm" :model="manualNwkForm" :rules="manualNwkRules" label-width="100px">
						<el-form-item label="信道号" prop="channel">
							<el-input v-model="manualNwkForm.channel" required style="max-width:480px"></el-input>
						</el-form-item>
						<!-- <el-form-item label="EUI64地址" prop="ieeeaddr">
							<el-input v-model="manualNwkForm.ieeeaddr" required style="max-width:480px"></el-input>
						</el-form-item> -->
						<el-form-item label="连接密钥" prop="linkkey">
							<el-input v-model="manualNwkForm.linkkey" required style="max-width:480px"></el-input>
						</el-form-item>
						<el-form-item label="发射功率" prop="power">
							<el-input v-model="manualNwkForm.power" required style="max-width:480px"></el-input>
						</el-form-item>
						<!-- <el-form-item label="网络地址" prop="nwkaddr">
							<el-input v-model="manualNwkForm.nwkaddr" required style="max-width:480px"></el-input>
						</el-form-item> -->
						<el-form-item label="网络密钥" prop="nwkkey">
							<el-input v-model="manualNwkForm.nwkkey" required style="max-width:480px"></el-input>
						</el-form-item>
						<el-form-item label="PAN ID" prop="panid">
							<el-input v-model="manualNwkForm.panid" required style="max-width:480px"></el-input>
						</el-form-item>
						<el-form-item label="扩展PAN ID" prop="panidex">
							<el-input v-model="manualNwkForm.panidex" required style="max-width:480px"></el-input>
						</el-form-item>
					</el-form>
				</div>
    		</span>
			<span slot="footer" class="dialog-footer">
    			<el-button v-if="!manualNwkForm.waitting" type="primary" @click="confirmManualNetwork">确 定</el-button>
    			<i v-else class="el-icon-loading" style="font-size:25px"></i>
  			</span>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery';
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'
	import imgDefault from '../../../../assets/images/title-right.png'
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				imgUrl: imgDefault,
				timer: 20, //默认倒数15秒
				stop: false, //默认是停止的，但界面加载之后会变成false
				pingTime: '',
				IsOnLine: false, //设备是否在线
				loading: false, //数据加载
				loadingContent: '数据加载中...',
				boardInfoDatas: [],
				deviceInfoDatas: [],
				refreshObj: {
					waitting: false
				},
				addNwkObj: {
					waitting: false
				},
				netWorkObj: {
					waitting: false
				},
				renameBoardDialog: false,
				renameBoardForm: {
					boardName: '',
					waitting: false
				},
				renameBoardRules: {
					boardName: [{
						required: true,
						message: "名称不能为空",
						trigger: 'blur'
					}],
				},
				renameDeviceDialog: false,
				renameDeviceForm: {
					id: '',
					deviceName: '',
					waitting: false
				},
				renameDeviceRules: {
					deviceName: [{
						required: true,
						message: "名称不能为空",
						trigger: 'blur'
					}],
				},
				renameClusterDialog: false,
				renameClusterForm: {
					id: '',
					ep: null,
					clusterId: null,
					clusterName: '',
					waitting: false
				},
				renameClusterRules: {
					clusterName: [{
						required: true,
						message: "名称不能为空",
						trigger: 'blur'
					}],
				},
				manualNwkDialog: false,
				manualNwkForm: {},
				manualNwkRules: {
					channel: [{
						required: true,
						message: "信道号不能为空",
						trigger: 'blur'
					}],
					power: [{
						required: true,
						message: "发射功率不能为空",
						trigger: 'blur'
					}],
					linkkey: [{
						required: true,
						message: "连接密钥不能为空",
						trigger: 'blur'
					}],
					nwkkey: [{
						required: true,
						message: "网络密钥不能为空",
						trigger: 'blur'
					}],
					panid: [{
						required: true,
						message: "PAN ID不能为空",
						trigger: 'blur'
					}],
					panidex: [{
						required: true,
						message: "扩展PAN ID不能为空",
						trigger: 'blur'
					}],
				},
				uploadTimeDialog: false,
				uploadTimeForm: {
					id: null,
					ep: null,
					min: 0,
					max: 0,
					waitting: false
				}
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				// this.$emit('changeView', "controlList", {})
			},
			//判断返回response信息
			backMsgContent(array) {
				if(array[0].sn === this.templateObj.sn && array[0].code === 0) {
					this.$notify({
						title: '成功',
						message: this.$t('message.operationSuccess'),
						type: 'success',
						duration: 2500
					});
					this.renameClusterDialog = false;
					this.renameDeviceDialog = false;
					this.renameBoardDialog = false;
					this.manualNwkDialog = false;
					this.uploadTimeDialog = false;
				} else if(array[0].code === 80002000) {
					this.$notify.error({
						title: '错误',
						message: '指令不识别',
						duration: 2500
					});
				} else if(array[0].code === 80002001) {
					this.$notify.error({
						title: '错误',
						message: 'ZigBee设备不存在',
						duration: 2500
					});
				} else if(array[0].code === 80002002) {
					this.$notify.error({
						title: '错误',
						message: 'ZigBee端点不存在',
						duration: 2500
					});
				} else if(array[0].code === 80002003) {
					this.$notify.error({
						title: '错误',
						message: 'ZigBee Cluster不存在',
						duration: 2500
					});
				} else if(array[0].code === 80002004) {
					this.$notify.error({
						title: '错误',
						message: '发送控制指令失败',
						duration: 2500
					});
				} else if(array[0].code === 80002005) {
					this.$notify.error({
						title: '错误',
						message: '控制板不存在',
						duration: 2500
					});
				} else if(array[0].code === 80002998) {
					this.$notify.error({
						title: '错误',
						message: '未知异常',
						duration: 2500
					});
				} else if(array[0].code === 80002999) {
					this.$notify.error({
						title: '错误',
						message: '处理异常',
						duration: 2500
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: this.$t('message.operationFailed'),
						duration: 2500
					});
				}
			},
			//获取网络参数
			getNwkParameter() {
				HttpServer.httpPost.call(this, '/Api/Peripheral/NwkParameter', {
					sns: [this.templateObj.sn],
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					// console.log(response)
				})
			},
			//自动组网
			AutoNetWork() {
				clearInterval(this.zigBeeDetailIntervalid)
				this.netWorkObj.waitting = true;
				HttpServer.httpPost.call(this, '/Api/Peripheral/AutoNwk', {
					sns: [this.templateObj.sn],
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					// console.log('自动组网', response)
					this.netWorkObj.waitting = false;
					if(response.data.code === 0) {
						if(response.data.response.length > 0) {
							this.backMsgContent(response.data.response);
						} else {
							this.$notify.error({
								title: '错误',
								message: this.$t('message.operationFailed'),
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					window.setTimeout(
						this.zigBeeDetailIntervalid = setInterval(() => {
							this.getDatas();
						}, 5000), 5000);
				})
			},
			//退出组网
			OutNetWork() {
				this.$confirm('此操作将删除ZigBee设备，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.netWorkObj.waitting = true;
					clearInterval(this.zigBeeDetailIntervalid)
					HttpServer.httpPost.call(this, '/Api/Peripheral/OutNwk', {
						sns: [this.templateObj.sn],
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						// console.log('退出组网', response)
						this.netWorkObj.waitting = false;
						if(response.data.code === 0) {
							if(response.data.response.length > 0) {
								this.backMsgContent(response.data.response);
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						window.setTimeout(
							this.zigBeeDetailIntervalid = setInterval(() => {
								this.getDatas();
							}, 5000), 5000);
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},
			//手动组网
			confirmManualNetwork() {
				clearInterval(this.zigBeeDetailIntervalid)
				this.manualNwkForm.waitting = true;
				var param = {
					channel: this.manualNwkForm.channel,
					power: this.manualNwkForm.power,
					panidex: this.manualNwkForm.panidex,
					panid: this.manualNwkForm.panid,
					linkkey: this.manualNwkForm.linkkey,
					nwkkey: this.manualNwkForm.nwkkey,
					sns: [this.templateObj.sn],
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/Peripheral/ManualNwk', param, function(response) {}, function(response) {
					this.manualNwkForm.waitting = false;
					if(response.data.code === 0) {
						if(response.data.response.length > 0) {
							this.backMsgContent(response.data.response);
						} else {
							this.$notify.error({
								title: '错误',
								message: this.$t('message.operationFailed'),
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					window.setTimeout(
						this.zigBeeDetailIntervalid = setInterval(() => {
							this.getDatas();
						}, 5000), 5000);
				})
			},
			//组网
			handleCommand(command) {
				if(this.IsOnLine) {
					if(command === '1') {
						this.manualNwkForm = this.boardInfoDatas[0];
						this.manualNwkForm.waitting = false;
						this.manualNwkDialog = true;
					} else if(command === '2') {
						this.AutoNetWork();
					} else {
						this.OutNetWork();
					}
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			send() {
				let me = this;
				me.stop = true;
				me.loading = true;
				let interval = window.setInterval(function() {
					if((me.timer--) <= 0) {
						me.timer = 20;
						me.stop = false;
						me.loading = false;
						me.getDatas();
						window.clearInterval(interval);
					}
					me.loadingContent = "剩余时间：" + me.timer + 'S';
				}, 1000);
			},
			//允许加网
			AddNetwork() {
				if(this.IsOnLine) {
					clearInterval(this.zigBeeDetailIntervalid)
					this.addNwkObj.waitting = true;
					var param = {
						info: {
							time: 15
						},
						sns: [this.templateObj.sn],
						UserId: parseInt(GloabFun.getKeyId())
					}
					HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeAddNwk', param, function(response) {}, function(response) {
						// console.log('允许加网',response)
						this.addNwkObj.waitting = false;
						if(response.data.code === 0) {
							if(response.data.response.length > 0) {
								if(response.data.response[0].sn === this.templateObj.sn && response.data.response[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
									this.send();
								} else if(response.data.response[0].code === 80002000) {
									this.$notify.error({
										title: '错误',
										message: '指令不识别',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002001) {
									this.$notify.error({
										title: '错误',
										message: 'ZigBee设备不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002002) {
									this.$notify.error({
										title: '错误',
										message: 'ZigBee端点不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002003) {
									this.$notify.error({
										title: '错误',
										message: 'ZigBee Cluster不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002004) {
									this.$notify.error({
										title: '错误',
										message: '发送控制指令失败',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002005) {
									this.$notify.error({
										title: '错误',
										message: '控制板不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002998) {
									this.$notify.error({
										title: '错误',
										message: '未知异常',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002999) {
									this.$notify.error({
										title: '错误',
										message: '处理异常',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//请求脱网
			controlEscapeNwk(row) {
				if(this.IsOnLine) {
					this.$confirm('此操作将删除该设备，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						clearInterval(this.zigBeeDetailIntervalid)
						this.loading = true;
						var param = {
							id: row.id,
							sns: [this.templateObj.sn],
							UserId: parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeEscapeNwk', param, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								if(response.data.response.length > 0) {
									this.backMsgContent(response.data.response);
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							window.setTimeout(
								this.zigBeeDetailIntervalid = setInterval(() => {
									this.getDatas();
								}, 5000), 5000);
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//修改设备名称
			changeDeviceName(row) {
				if(this.IsOnLine) {
					this.renameDeviceDialog = true;
					this.renameDeviceForm.id = row.id;
					this.renameDeviceForm.deviceName = row.name;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			confirmRenameDevice(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						clearInterval(this.zigBeeDetailIntervalid)
						this.renameDeviceForm.waitting = true;
						var param = {
							id: this.renameDeviceForm.id,
							name: this.renameDeviceForm.deviceName,
							sns: [this.templateObj.sn],
							UserId: parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeSetName', param, function(response) {}, function(response) {
							this.renameDeviceForm.waitting = false;
							if(response.data.code === 0) {
								if(response.data.response.length > 0) {
									this.backMsgContent(response.data.response);

								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							window.setTimeout(
								this.zigBeeDetailIntervalid = setInterval(() => {
									this.getDatas();
								}, 5000), 5000);
						})
					} else {
						return false;
					}
				});
			},
			//修改控制板名称
			changeBoardName(row) {
				if(this.IsOnLine) {
					this.renameBoardDialog = true;
					this.renameBoardForm.boardName = row.name;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			confirmRenameBoard(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						clearInterval(this.zigBeeDetailIntervalid)
						this.renameBoardForm.waitting = true;
						var param = {
							info: {
								name: this.renameBoardForm.boardName
							},
							sns: [this.templateObj.sn],
							UserId: parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeName', param, function(response) {}, function(response) {
							this.renameBoardForm.waitting = false;
							if(response.data.code === 0) {
								if(response.data.response.length > 0) {
									this.backMsgContent(response.data.response);
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							window.setTimeout(
								this.zigBeeDetailIntervalid = setInterval(() => {
									this.getDatas();
								}, 5000), 5000);
						})
					} else {
						return false;
					}
				});
			},
			//修改Cluster名称
			changeClusterName(row1, row2) {
				if(this.IsOnLine) {
					this.renameClusterForm.id = row1.id;
					this.renameClusterForm.ep = row2.ep;
					this.renameClusterForm.clusterId = row2.clusterid;
					this.renameClusterForm.clusterName = row2.name;
					this.renameClusterDialog = true;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			confirmRenameCluster(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						clearInterval(this.zigBeeDetailIntervalid)
						this.renameClusterForm.waitting = true;
						var param = {
							id: this.renameClusterForm.id,
							endpoint: this.renameClusterForm.ep,
							clusterid: this.renameClusterForm.clusterId,
							name: this.renameClusterForm.clusterName,
							sns: [this.templateObj.sn],
							UserId: parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/Peripheral/ClusterSetName', param, function(response) {}, function(response) {
							this.renameClusterForm.waitting = false;
							if(response.data.code === 0) {
								if(response.data.response.length > 0) {
									this.backMsgContent(response.data.response);
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							window.setTimeout(
								this.zigBeeDetailIntervalid = setInterval(() => {
									this.getDatas();
								}, 5000), 5000);
						})
					} else {
						return false;
					}
				});
			},
			//修改ZigBee开关自动上报时间间隔
			controlUploadTime(row1, row2) {
				if(this.IsOnLine) {
					this.uploadTimeDialog = true;
					this.uploadTimeForm.id = row1.id;
					this.uploadTimeForm.ep = row2.ep;
					this.uploadTimeForm.min = row2.min;
					this.uploadTimeForm.max = row2.max;
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			confirmControlUploadTime() {
				if(this.uploadTimeForm.min === 0 || this.uploadTimeForm.max === 0) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '时间设置不能为0',
						type: 'warning',
						duration: 2500
					});
				} else if(this.uploadTimeForm.min >= this.uploadTimeForm.max) {
					this.$notify({
						title: this.$t('message.warning'),
						message: '时间设置有误',
						type: 'warning',
						duration: 2500
					});
				} else {
					clearInterval(this.zigBeeDetailIntervalid)
					this.uploadTimeForm.waitting = true;
					var param = {
						info: [{
							id: this.uploadTimeForm.id,
							endpoint: [this.uploadTimeForm.ep]
						}],
						min: Math.round(parseInt(this.uploadTimeForm.min)),
						max: Math.round(parseInt(this.uploadTimeForm.max)),
						sns: [this.templateObj.sn],
						UserId: parseInt(GloabFun.getKeyId())
					}
					HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeInterval', param, function(response) {}, function(response) {
						this.uploadTimeForm.waitting = false;
						if(response.data.code === 0) {
							if(response.data.response.length > 0) {
								this.backMsgContent(response.data.response);
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						window.setTimeout(
							this.zigBeeDetailIntervalid = setInterval(() => {
								this.getDatas();
							}, 5000), 5000);
					})
				}
			},
			//控制开关
			controlOnOff(row1, row2) {
				if(this.IsOnLine) {
					clearInterval(this.zigBeeDetailIntervalid)
					row2.waitting = true;
					var param = {
						info: [{
							id: row1.id,
							endpoint: [row2.ep]
						}],
						op: row2.state ? 1 : 0,
						sns: [this.templateObj.sn],
						UserId: parseInt(GloabFun.getKeyId())
					}
					HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeOp', param, function(response) {}, function(response) {
						row2.waitting = false;
						if(response.data.code === 0) {
							if(response.data.response.length > 0) {
								if((response.data.response)[0].sn == this.templateObj.sn && (response.data.response)[0].code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.operationSuccess'),
										type: 'success',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002000) {
									this.$notify.error({
										title: '错误',
										message: '指令不识别',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002001) {
									this.$notify.error({
										title: '错误',
										message: 'ZigBee设备不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002002) {
									this.$notify.error({
										title: '错误',
										message: 'ZigBee端点不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002003) {
									this.$notify.error({
										title: '错误',
										message: 'ZigBee Cluster不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002004) {
									this.$notify.error({
										title: '错误',
										message: '发送控制指令失败',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002005) {
									this.$notify.error({
										title: '错误',
										message: '控制板不存在',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002998) {
									this.$notify.error({
										title: '错误',
										message: '未知异常',
										duration: 2500
									});
								} else if(response.data.response[0].code === 80002999) {
									this.$notify.error({
										title: '错误',
										message: '处理异常',
										duration: 2500
									});
								} else {
									this.$notify.error({
										title: '错误',
										message: this.$t('message.operationFailed'),
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.$t('message.operationFailed'),
									duration: 2500
								});
							}
						} else {
							row2.state = !row2.state;
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						window.setTimeout(
							this.zigBeeDetailIntervalid = setInterval(() => {
								this.getDatas();
							}, 5000), 5000);
					})
				} else {
					row2.state = !row2.state;
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//绑定与解绑
			controlBind(row1, row2) {
				if(this.IsOnLine) {
					if(row2.min === 0 || row2.max === 0) {
						this.$notify({
							title: this.$t('message.warning'),
							message: '请先设置开关上报时间间隔',
							type: 'warning',
							duration: 2500
						});

					} else {
						//绑定
						clearInterval(this.zigBeeDetailIntervalid);
						row2.waitting = true;
						if(row2.bind) {
							var param = {
								id: row1.id,
								endpoint: row2.ep,
								clusterid: row2.clusterid,
								sns: [this.templateObj.sn],
								UserId: parseInt(GloabFun.getKeyId())
							}
							HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeBind', param, function(response) {}, function(response) {
								row2.waitting = false;
								if(response.data.code === 0) {
									if(response.data.response.length > 0) {
										if((response.data.response)[0].sn == this.templateObj.sn && (response.data.response)[0].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002000) {
											this.$notify.error({
												title: '错误',
												message: '指令不识别',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002001) {
											this.$notify.error({
												title: '错误',
												message: 'ZigBee设备不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002002) {
											this.$notify.error({
												title: '错误',
												message: 'ZigBee端点不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002003) {
											this.$notify.error({
												title: '错误',
												message: 'ZigBee Cluster不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002004) {
											this.$notify.error({
												title: '错误',
												message: '发送控制指令失败',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002005) {
											this.$notify.error({
												title: '错误',
												message: '控制板不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002998) {
											this.$notify.error({
												title: '错误',
												message: '未知异常',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002999) {
											this.$notify.error({
												title: '错误',
												message: '处理异常',
												duration: 2500
											});
										} else {
											this.$notify.error({
												title: '错误',
												message: this.$t('message.operationFailed'),
												duration: 2500
											});
										}
									} else {
										this.$notify.error({
											title: '错误',
											message: this.$t('message.operationFailed'),
											duration: 2500
										});
									}
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
								window.setTimeout(
									this.zigBeeDetailIntervalid = setInterval(() => {
										this.getDatas();
									}, 5000), 5000);
							})
							//解绑
						} else {
							var param = {
								id: row1.id,
								endpoint: row2.ep,
								clusterid: row2.clusterid,
								sns: [this.templateObj.sn],
								UserId: parseInt(GloabFun.getKeyId())
							}
							HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeUnBind', param, function(response) {}, function(response) {
								row2.waitting = false;
								// console.log(response)
								if(response.data.code === 0) {
									if(response.data.response.length > 0) {
										if((response.data.response)[0].sn == this.templateObj.sn && (response.data.response)[0].code === 0) {
											this.$notify({
												title: '成功',
												message: this.$t('message.operationSuccess'),
												type: 'success',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002000) {
											this.$notify.error({
												title: '错误',
												message: '指令不识别',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002001) {
											this.$notify.error({
												title: '错误',
												message: 'ZigBee设备不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002002) {
											this.$notify.error({
												title: '错误',
												message: 'ZigBee端点不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002003) {
											this.$notify.error({
												title: '错误',
												message: 'ZigBee Cluster不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002004) {
											this.$notify.error({
												title: '错误',
												message: '发送控制指令失败',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002005) {
											this.$notify.error({
												title: '错误',
												message: '控制板不存在',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002998) {
											this.$notify.error({
												title: '错误',
												message: '未知异常',
												duration: 2500
											});
										} else if(response.data.response[0].code === 80002999) {
											this.$notify.error({
												title: '错误',
												message: '处理异常',
												duration: 2500
											});
										} else {
											this.$notify.error({
												title: '错误',
												message: this.$t('message.operationFailed'),
												duration: 2500
											});
										}
									} else {
										this.$notify.error({
											title: '错误',
											message: this.$t('message.operationFailed'),
											duration: 2500
										});
									}
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
								window.setTimeout(
									this.zigBeeDetailIntervalid = setInterval(() => {
										this.getDatas();
									}, 5000), 5000);
							})
						}
					}
				} else {
					row2.bind = !row2.bind;
					this.$notify({
						title: this.$t('message.warning'),
						message: '设备处于离线状态，不可控制。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].bindtime.indexOf("T");
					array[i].bindtime = array[i].bindtime.substring(0, index1) + " " + array[i].bindtime.substring(index1 + 1, index1 + 9);
				}
			},
			//初始化数据
			initDatas(array, str1, str2) {
				if(array) {
					array.forEach(function(item1) {
						item1.waitting = false;
						item1[str1].forEach(function(item2) {
							item2[str2] = item2[str2] ? true : false;
							item2.waitting = false;
						})
					})
				}
				return array;
			},
			//刷新
			reloadDatas() {
				this.loading = true;
				this.loadingContent = "数据加载中...";
				HttpServer.httpPost.call(this, '/Api/ZigBee/AllInfo', {
					sn: [this.templateObj.sn]
				}, function(response) {}, function(response) {
					// console.log('zigbee设备详情',response)
					this.loading = false;
					if(response.data.code === 0) {
						this.pingTime = response.data.pingtime;
						this.boardInfoDatas = [];
						// response.data.boardinfo[0].status.boardName = this.templateObj.name;
						this.boardInfoDatas.push(response.data.boardinfo[0].status)
						this.deviceInfoDatas = this.initDatas(response.data.info, "onoff", "state");
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			getDatas() {
				// this.loading = true;
				HttpServer.httpPost.call(this, '/Api/ZigBee/AllInfo', {
					sn: [this.templateObj.sn]
				}, function(response) {}, function(response) {
//					 console.log('zigbee设备详情',response)
					// this.loading = false;
					if(response.data.code === 0) {
						this.pingTime = response.data.pingtime;
						this.boardInfoDatas = [];
						this.boardInfoDatas.push(response.data.boardinfo[0].status)
						this.deviceInfoDatas = this.initDatas(response.data.info, "onoff", "state");
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			}
		},
		created() {
			// console.log(this.templateObj)
			this.IsOnLine = this.templateObj.online;
			this.getDatas();
			if(this.templateObj.online) {
				this.zigBeeDetailIntervalid = setInterval(() => {
					this.getDatas();
				}, 5000)
			}
			// this.getTimeDeviceDetail();
		},
		beforeDestroy() {
			clearInterval(this.zigBeeDetailIntervalid);
		},
		// destoryed(){
		//  		clearInterval(window.zigBeeDetailIntervalid);
		// }	
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.el-date-editor.el-input {
		width: 115px;
	}
	
	.inner-section {
		// margin: 5px 5px;
		// height: 100%;
		// border: 1px solid #BEBEBE;
		.flash-object {
			// margin: 5px 0;
			height: 368px;
			// height: e("calc(100% - 40px)");
			position: relative;
		}
		.opreat-button {
			//text-align: center;
		}
	}
	
	.navList {
		width: 100%;
		padding: 3px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			// background: #EAF4FF;
			.detail-title {
				text-align: center;
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				width: 100%;
				height: 35px;
				color: white;
				// background-color: rgba(32,160,255,.2);
				background-color: #20A0FF;
				border-radius: 3px;
				// border-bottom: 1px solid #20A0FF;
				line-height: 35px;
				padding-left: 10px;
				.title-img {
					width: 30%;
					float: right;
					height: 100%;
					width: 100px
				}
			}
			.detail-setion-top {
				width: 100%;
				height: 20px;
				display: flex;
				justify-content: space-around;
			}
			.detail-section {
				width: 100%;
				height: 100px;
				display: flex;
				justify-content: space-around;
				.section-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 40%;
					height: 100%;
				}
				.section-right {
					// text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					width: 60%;
					padding: 3px;
					height: 100%;
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #FFFFFF;
		height: 400px;
	}
	
	.grid-content1 {
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>